<template>
    <div class="mainCenter">
        <div class="title">管理员管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item>
                        <el-input type="text" placeholder="输入管理员姓名" v-model="keyWords"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="addInfo">
                    <el-button type="danger" @click="deleteMoreManger"><el-icon>
                            <Delete/>
                        </el-icon>批量删除({{ nums }})</el-button>
                    <el-button type="primary" @click='addManger'><el-icon>
                            <Plus />
                        </el-icon>添加管理员</el-button>
                </div>
            </div>
            <el-table style="width: 100%" stripe border :data="mangerList" fit  @selection-change="getMore">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="uid" label="用户编号" />
                <el-table-column prop="roleid" label="角色编号" />
                <el-table-column prop="relname" label="管理员姓名" />
                <el-table-column prop="roleList.rolename" label="角色名称" />
                <el-table-column label="账号状态">
                    <template #default="scope">
                        <p :style="{color:scope.row.state?'green':'red'}"><span :class="'point '+(scope.row.state?'green':'red')"></span>{{ scope.row.state?'正常':'禁用' }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="editeManger(scope.$index,scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="danger" plain size="small" @click="deleteManger(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 

             background layout="total, sizes, prev, pager, next" 
             :page-sizes="[5, 10, 20, 40]"
             :total="count" style="float: right;margin-top: 20px;"  
             @current-change="jumpPage"
             @size-change="getlimit"
            />
            <el-drawer v-model="isChange" title="管理员操作" direction="btt" size="300">
                <EditManger  :mangerInfo="mangerInfo" @isShow="getChange" :isChange="isChange"></EditManger>
            </el-drawer>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqDeleteManger, reqDeleteMangerMore, reqEditManger, reqGetMangerList, reqSearchUser } from '@/api/common';
import { User } from '@/types/user';
import { elementConfirm, tip } from '@/utils/alert';
import { onMounted, ref ,watch} from 'vue';
import EditManger from './componets/EditManger.vue';
const mangerList = ref<Array<User>>([])
const mangerInfo=ref<User|null>(null)
const count=ref<number>(0)
const nums=ref<number>(0)
const page=ref<number>(1)
const limit=ref<number>(10)
const uids=ref<Array<string>>([])
const isChange=ref<boolean>(true)
const keyWords=ref<String>('')
const pagination=ref<boolean>(false)

const jumpPage=(num:number)=>{
    
    if(pagination.value){
        getMangerList(num,limit.value)
    }else{
        startSearch()
    }
    page.value=num
}


const getChange = (change: boolean) => {
    isChange.value = change
}
const getlimit=(value:number)=>{
    limit.value=value
    if(pagination.value){
        getMangerList(page.value,limit.value)
    }else{
        startSearch()
    }
}
const getMangerList = (page:number,limit:number) => {
    reqGetMangerList(page,limit).then(res => {
        mangerList.value = res.data.data.data
        console.log(res);
        count.value=res.data.data.count
    })
}
const getMore=(selection:User[])=>{
    nums.value=selection.length
    let arr:string[]=[]
    selection.forEach((item:User)=> {
        arr.push(item.uid as string)
    });
    uids.value=arr
}

const deleteMoreManger=()=>{
    elementConfirm().then(()=>{
        tip("删除失败，功能未开放","warning")
    })
}

const startSearch=()=>{
    reqSearchUser(keyWords.value as string,limit.value,page.value).then(res=>{
        mangerList.value=res.data.data.data
        count.value=res.data.data.count
        console.log( mangerList.value);
    })
}
const search=()=>{
    pagination.value=false
    page.value=1
    startSearch()
    
}

const deleteManger=(idx:number,info:User)=>{
    elementConfirm().then(()=>{
        info.roleid="81903"
        reqEditManger(info).then(res=>{
            mangerList.value.splice(idx,1)
        })
    })
}

const addManger=()=>{
    mangerInfo.value=null
    isChange.value=true
}

const editeManger=(idx:number,info:User)=>{
    mangerInfo.value=info as User
    isChange.value=true
}

onMounted(() => {
    isChange.value=false
    getMangerList(page.value,limit.value)
})
</script>

<style scoped lang="scss">
p  {
    display: flex;
    align-items: center;
    .point {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .red{
        background-color: red;
    }
    .green{
        background-color: green;
    }
}

:deep(.el-drawer) {
    border-radius: 5px;
    width: 600px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    top: 50%;
    margin-top: -200px;
}
</style>